<template>
  <div class="home-container">
    <van-cell title="推荐歌单" />
    <van-grid :border="false" :column-num="3" :gutter="1">
      <van-grid-item v-for="item in recommendList" :key="item.id">
        <van-image width="111" height="100" fit="cover" :src="item.picUrl" />
        <p class="music-name van-multi-ellipsis--l2">{{ item.name }}</p>
      </van-grid-item>
    </van-grid>
    <van-cell title="最新音乐" />
    <van-cell-group>
      <music-item :item="item" v-for="item in songlist" :key="item.id" />
    </van-cell-group>
  </div>
</template>
<script>
import { getrecommendlist, getnewsong } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem.vue'
export default {
  components: { MusicItem },
  name: 'HOME',
  data () {
    return {
      recommendList: [],
      songlist: []
    }
  },

  created () {
    this.getpersonalized()
    this.getsonglist()
  },

  methods: {
    async getpersonalized () {
      try {
        const res = await getrecommendlist(9)
        this.recommendList = res.data.result
      } catch (err) {
        console.log(err.message)
      }
    },
    async getsonglist () {
      try {
        const res = await getnewsong(16)
        this.songlist = res.data.result
      } catch (err) {
        console.log(err.message)
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  overflow: hidden;
  .van-cell {
    background-color: #c20c0c;
    color: #fff;
  }
  .music-name {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
    padding: 0 2px;
  }
  /deep/.van-grid-item__content {
    padding: 14px 5px;
  }
  /deep/.list {
    background-color: #fff;
    color: black;
  }
}
</style>
